【前言】
　　我們昨天跟React說想跟他當好朋友，而且雙方也做了自我介紹了，如果按照少女漫畫的情節應該就可以直接牽手抱抱親親
　　BUT，人生就是有那個BUT。
　　React的好友們就跑出來攪局啦（暈，說如果沒有搞懂他們是React的誰是不會那麼輕易放過我們.....

【正文】
　　所以今天就來簡單介紹一下ES6、Babel、JSX這三個東西囉。

1. ES6

　　我們都知道ES6是泛指由ECMAScript在2015年所釋出的標準（ECMAScript 2015），而React的基礎就是建構在ES6上，因此在學習React的時候，我們也要先把ES6先練熟悉（我也還在熟悉中）。那最主要多了一些特點：

• let & const
  使用let跟const最大的好處就是宣告的變數的作用範圍僅限於所屬的區塊中。這樣對於在撰寫程式時可以將變數變得更加獨立。

  const myLetFun = () => {
    let myLet = 2;
    console.log('myLet: ', myLet); // myLet: 2
  }
  const myConst = 3; // myConst是一常數
  console.log('myConst: ', myConst); // myConst: 3
  myLetFun();
  

• 解構（destructuring）
  　可以將陣列或物件中的資料取出成獨立變數。

  const arr = [1, 2, 3, 4, 5];
  const [a, b, ...rest] = arr;
  
  console.log('a: ', a); // a: 1
  console.log('b: ', b); // b: 2
  console.log('rest: ', ...rest); // rest: 3 4 5
  

• 字串模板（string template）
  我們可以利用這個字串模板定義一個複雜的字串甚至是html標籤字串，使用反引號（`）符號前後夾起，有變數時則用${　變數名稱　}代表。

  const name = 'Hyora';
  const stringTemplate = `
    Hello, ${name}!
  `;
  console.log('stringTemplate', stringTemplate);  // stringTemplate: Hello, Hyora!
  

• Arrow Function
  　以前利用function(){ }宣告的function，現在大多都可以利用arrow function來代替，不僅看起來更加簡潔，還可以綁定this值。

  function test () {
    console.log('Hello');
  }
  
  const test_2 = () => {
   console.log('Hello_2');
  };
  
  test();　// Hello
  test_2(); // Hello_2
  

• class
  　ES6提供了類似class(類別)的實作方法，但追根究柢，Javascript畢竟沒有物件導向的概念，所以他是模擬一個類似物件導向中類別的概念。當然這對我們在宣告物件時，也帶來很多的方便。

  class People {
    constructor(name) {
      this.name = name;
    }
    whoAmI() {
      console.log(`Hello, ${this.name}`); // Hello, Hyora
    }
  }
  
  let person = new People('Hyora');
  person.whoAmI();
  

2. Babel

Babel is a JavaScript compiler

　　簡單來說，Babel就是一個幫忙我們編譯我們寫的Javascript，由於我們瀏覽器並不看得懂ES6、JSX所寫的程式碼，所以他會幫我們編譯成瀏覽器看得懂的程式碼。

```
// ES6
const name = 'Hyora';
const stringTemplate = `
  Hello, ${name}!
`;
console.log('stringTemplate', stringTemplate);  // stringTemplate: Hello, Hyora!

// Babel編譯後
'use strict';
var name = 'Hyora';
var stringTemplate = '\n      Hello, ' + name + '!\n    ';
console.log('stringTemplate', stringTemplate); // stringTemplate: Hello, Hyora!
```

3. JSX
   　　其實JSX也不是什麼新的程式語言，他更像是Javascript的語法糖（Syntactic sugar），他可以幫助我們在撰寫React Component來的更加簡便，React允許這樣作是因為它在讀到JSX語法時，會自動幫你用React.createElement方法來建立虛擬的DOM元素，也就是說JSX語法實際上就是使用React.createElement方法的簡寫語法。
   　但瀏覽器也看不懂這樣的寫法，所以也必須透過Babel先編譯才可以讓瀏覽器執行。

   // JSX
   const Element = () => (
    <h1>Hello, Hyora</h1>
   );
   
   ReactDOM.render(
    <Element />,
     document.getElementById('app')
   );
   
   // Babel編譯後
   'use strict';
   var Element = function Element() {
     return React.createElement(
       'h1',
       null,
       'Hello, Hyora'
     );
   };
   
   ReactDOM.render(React.createElement(Element, null), document.getElementById('app'));
   

　　今天很簡（ㄙㄨㄟˊ）略（ㄅㄧㄢˋ）的介紹ES6、Babel、JSX，希望有所幫助啦。明天希望可以來撰寫第一個React Component囉！如果想更了解上面三個東西的話可以點下面的連結繼續閱讀囉：）

ECMAScript 6 入門
Babel
Introducing JSX